<template>
  <div class="mainBody">
    <div class="content">
      <div id="main-box">
        <div id="left-box">
          <div id="left-top-box" class="div-box">
            <el-button class="ca-btn" size="small" @click="selectFh('+')">+</el-button>
            <el-button class="ca-btn" size="small" @click="selectFh('-')">-</el-button>
            <el-button class="ca-btn" size="small" @click="selectFh('*')">*</el-button>
            <el-button class="ca-btn" size="small" @click="selectFh('/')">/</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('1')">1</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('2')">2</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('3')">3</el-button>
            <el-button class="ca-btn" size="small" @click="selectKh('(')">(</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('4')">4</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('5')">5</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('6')">6</el-button>
            <el-button class="ca-btn" size="small" @click="selectKh(')')">)</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('7')">7</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('8')">8</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('9')">9</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('0')">0</el-button>
            <!-- <el-button class="ca-btn" size="small" @click="selectKh('√')">√</el-button>-->
            <div v-if="showDate" style="text-align: center;margin-top: 30px;">
              <el-button @click="changeCycle('1')">{{ $t('上一年') }}</el-button>
              <el-button @click="changeCycle('2')">{{ $t('上一期') }}</el-button>
            </div>
          </div>
          <div id="left-btm-box" class="div-box">
            <div class="area-header">
              <span class="area-header-title">{{ $t('运营指标') }}</span>
            </div>
            <div>
              <ul v-for="item in predictLis" :key="item.id">
                <li class="pcw-key-li" @click="loadKeyDetails(item)">{{ $t(item.indicators) }}</li>
              </ul>
            </div>
          </div>
        </div>
        <div id="right-box" v-loading="loading" class="div-box" style="height: 485px;">
          <div class="area-header">
            <span class="area-header-title">{{ $t('选择指标') }}</span>
          </div>
          <div>
            <ul v-for="sub in subjects" :key="sub.id">
              <li class="pcw-key-li" @click="selectZb(sub.indicators, sub.indicatorsCode)">{{ sub.indicators }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div>
        <el-col :span="24">
          <el-input v-model="formulaName" readonly :placeholder="$t('配置公式')" style="margin-top: 10px;" />
        </el-col>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button @click="resetFormula">{{ $t("重置") }}</el-button>
      <el-button v-hasPermi="['deal:indicator:edit']" type="primary" @click="confirmData">{{ $t("确定") }}</el-button>
    </div>
  </div>
</template>

<script>
import { Notification } from 'element-ui'
import { getAllData } from '@/api/deal/indicator/dealIndicatorPredict'
export default {
  props: {
    typeId: {
      type: String,
      required: true,
      default: ''
    },
    formula: {
      type: Object,
      required: true
    },
    showDate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 遮罩层
      loading: false,
      // 表单校验
      rules: {},
      // 关键指标基础科目
      subjects: {},
      // 公式name
      formulaName: '',
      // 公式code
      formulaCode: '',
      // 区分上一季、上一年
      cycleDate: '',
      // 区别上一公式结尾是数字还是指标还是操作符
      qubie: '',
      predictLis: []
    }
  },
  watch: {
    formula: {
      handler(newVal) {
        this.resetFormula()
        this.formulaName = newVal.name ? newVal.name : ''
        this.formulaCode = newVal.code ? newVal.code : ''
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        typeId: this.typeId,
        id: undefined,
        tableType: undefined,
        keyCode: undefined,
        keyName: undefined,
        sort: undefined
      }
      this.resetForm('form')
    },
    // 获取都有哪些运营指标
    loadTypeList() {
      this.loading = true
      getAllData({ typeId: this.typeId, businessId: this.$route.query.companyId }).then(response => {
        if (response.rows !== null && response.rows.length > 0) {
          this.predictLis = response.rows
          this.loadKeyDetails(this.predictLis[0])
        }
        this.loading = false
      })
    },
    // 根据类型获取基础科目详情
    loadKeyDetails(data) {
      if (data.children !== undefined && data.children !== null && data.children.length > 0) {
        this.subjects = data.children
      }
    },
    // 选择操作符号
    selectFh(fu_hao) {
      if (this.qubie !== '' && this.qubie !== 'fu_hao' && this.qubie !== 'zuo_kuo_hao') {
        this.formulaName += fu_hao
        this.formulaCode += fu_hao
        this.qubie = 'fu_hao'
      } else {
        this.errorMsg()
      }
    },
    // 选择括号
    selectKh(kh) {
      if (kh === '(') {
        // 如果上一次的元素不是左括号并且不是右括号并且不能是指标，反之则公式错误
        if (this.qubie !== 'you_kuo_hao' && this.qubie !== 'zhi_biao' && this.qubie !== 'shu_zi') {
          this.formulaName += kh
          this.formulaCode += kh
          this.qubie = 'zuo_kuo_hao'
        } else {
          this.errorMsg()
        }
      } else if (kh === ')') {
        // 如果上一次的元素不是左括号并且不是右括号并且不是符号，反之则公式错误
        if (this.qubie !== '' && this.qubie !== 'zuo_kuo_hao' && this.qubie !== 'fu_hao') {
          this.formulaName += kh
          this.formulaCode += kh
          this.qubie = 'you_kuo_hao'
        } else {
          this.errorMsg()
        }
      } else {
        // 到这里选择的是根号 自动添加一个左括号
        this.formulaCode += 'sqrt('
        this.formulaName += kh + '('
        this.qubie = 'zuo_kuo_hao'
      }
    },
    // 选择了数字
    selectNum(num) {
      // 如果上一次的元素不是有指标并且不是右括号，反之则公式错误
      if (this.qubie !== 'zhi_biao' && this.qubie !== 'you_kuo_hao') {
        this.formulaName += num
        this.formulaCode += num
        this.qubie = 'shu_zi'
      } else {
        this.errorMsg()
      }
    },
    // 选择了指标
    selectZb(name, code) {
      // 如果上一次的元素不是右括号并且不是数字并且不是指标，反之则公式错误
      if (this.qubie !== 'you_kuo_hao' && this.qubie !== 'shu_zi' && this.qubie !== 'zhi_biao') {
        // 如果没有选择上一年或者上一季度
        if (this.cycleDate === '1' || this.cycleDate === '2') {
          this.formulaCode += '{' + this.changeZb(this.cycleDate, code) + '}'
          this.formulaName += name + this.changeName(this.cycleDate)
          this.cycleDate = ''
        } else {
          this.formulaCode += '{' + code + '}'
          this.formulaName += name + this.changeName(this.cycleDate)
        }
        this.qubie = 'zhi_biao'
      } else {
        this.errorMsg()
      }
    },
    // 改变公式code
    changeZb(cycleDate, code) {
      if (cycleDate === '1') {
        return 'lastYear.' + code
      } else if (cycleDate === '2') {
        return 'lastData.' + code
      }
    },
    // 改变展示公式名称
    changeName(cycleDate) {
      if (cycleDate === '1') {
        return this.$t('(上一年)')
      } else if (cycleDate === '2') {
        return this.$t('(上一期)')
      } else {
        return ''
      }
    },
    // 点击了“上一季”或者是“上一年”
    changeCycle(type) {
      if (this.qubie !== 'zhi_biao' || this.formulaName === '') {
        this.cycleDate = type
      }
    },
    // 展示公式错误信息
    errorMsg() {
      Notification.error({
        title: this.$t('此操作会导致公式错误！')
      })
    },
    // 重置按钮
    resetFormula() {
      this.subjects = []
      this.formulaName = ''
      this.formulaCode = ''
      this.cycleDate = ''
      this.qubie = ''
      this.zhibiao = ''
      if (this.predictLis !== undefined && this.predictLis !== null && this.predictLis.length > 0) {
        this.loadKeyDetails(this.predictLis[0])
      }
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      this.$parent.$parent.formOpen = false
      // 刷新list页面
      this.$parent.$parent.getList()
    },
    /** 提交按钮 */
    confirmData: function() {
      if (this.formulaName === '' || this.formulaName === undefined || this.formulaName.length <= 0) {
        Notification.error({
          title: this.$t('请选择公式！')
        })
      } else {
        // 判断一下左括号有括号数量是否相等
        var left = this.formulaName.split('(').length - 1
        var right = this.formulaName.split(')').length - 1
        if (left === right) {
          this.$parent.$parent.addFormula(this.formulaName, this.formulaCode)
          this.$parent.$parent.formOpen = false
        } else {
          Notification.error({
            title: '(' + ' )' + this.$t('不对称') + ',' + this.$t('请检查后重试!')
          })
        }
      }
    }
  }
}
</script>
